<div class="toolbar margin-bottom btn-and-search" [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="3" nzSm="3" nzMd="2" nzLg="2" nzXl="2">
    <button class="margin-right" nz-button nzType="primary" (click)="addJob()">
      <i nz-icon nzType="plus" nzTheme="outline"></i>
      <span *ngIf="!isMobile">添加</span>
    </button>
  </div>

  <div class="item" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="21" nzSm="21" nzMd="22" nzLg="22" nzXl="22">
    <button class="margin-right" nz-button (click)="refreshJob()">
      <i nz-icon nzType="redo" nzTheme="outline"></i>
      <span *ngIf="!isMobile">刷新</span>
    </button>
  </div>

</div>

<nz-table #fixedTable [nzData]="listOfData"
          [(nzPageIndex)]="pageHelper.currentPage"
          [nzFrontPagination]="false"
          (nzPageIndexChange)="nzPageIndexChange($event)"
          [(nzPageSize)]="pageHelper.pageSize"
          [nzTotal]="pageHelper.totalItems"
          nzTableLayout="fixed"
          [nzScroll]="{ x: 'auto' }"
          [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <thead>
  <tr>
    <th>#</th>
    <th>任务名称</th>
    <th>任务所在组</th>
    <th>任务类名</th>
    <th>表达式</th>
    <th>上次执行时间</th>
    <th>下次执行时间</th>
    <th>状态</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <ng-container *ngFor="let data of fixedTable.data let i = index">
    <tr>
      <td nzEllipsis>{{i + 1}}</td>
      <td nzEllipsis>{{data.job_NAME}}</td>
      <td nzEllipsis>{{data.job_GROUP}}</td>
      <td nzEllipsis>{{data.job_CLASS_NAME}}</td>
      <td nzEllipsis>{{data.cron_EXPRESSION}}</td>
      <td nzEllipsis>{{data.prev_FIRE_TIME | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
      <td nzEllipsis>{{data.next_FIRE_TIME | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
      <td nzEllipsis>
        <ng-container *ngIf="data.trigger_STATE == 'WAITING'">等待中</ng-container>
        <ng-container *ngIf="data.trigger_STATE == 'PAUSED'">暂停</ng-container>
        <ng-container *ngIf="data.trigger_STATE == 'ACQUIRED'">运行中</ng-container>
      </td>
      <td nzEllipsis>
        <a>
          <i nz-icon nzType="smile" nzTheme="twotone" (click)="recoverJob(data)" [nzTwotoneColor]="'#52C41A'"
             nz-tooltip nzTooltipTitle="恢复" nzTooltipPlacement="bottom"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>
          <i nz-icon nzType="edit" nzTheme="twotone" (click)="updateJob(data)" [nzTwotoneColor]="'#52C41A'"
             nz-tooltip nzTooltipTitle="修改" nzTooltipPlacement="bottom"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>
          <i nz-icon nzType="stop" nzTheme="twotone" (click)="pauseJob(data)" [nzTwotoneColor]="'#f50'" nz-tooltip
             nzTooltipTitle="暂停" nzTooltipPlacement="bottom"></i>
        </a>
        <nz-divider nzType="vertical"></nz-divider>
        <a>
          <i nz-icon nzType="delete" nzTheme="twotone" [nzTwotoneColor]="'#F5222D'" (click)="deleteJob(data)"
             nz-tooltip nzTooltipTitle="删除" nzTooltipPlacement="bottom"></i>
        </a>
      </td>
    </tr>
  </ng-container>
  </tbody>
</nz-table>

<app-scheduler-edit [isVisible]="isVisible"
                    [currentJob]="currentJob" (emitVisible)="setVisible($event)"></app-scheduler-edit>
